<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Avatar :src="userAvator"
              style="margin-right: 5px;" />
      <Icon :size="22"
            color="#999"
            type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="logout"
                      style="display: flex;justify-content: center;align-items: center;">
          <img src="../../../../assets/images/exit.png"
               alt=""
               width="18" />
          <span style="color:#333;font-size: 14px;padding-left: 10px;">退出登录</span>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Modal v-model="confirmLogout"
           title="退出"
           class="edit_modal public_modal_header">
      <div style="display: flex;justify-content: center;align-items: center;padding: 55px 0 30px;">
        <p style="font-size: 16px;color:#333;">确定要退出当前账号？</p>
      </div>
      <div class="btns">
        <Button @click="confirmLogout = false">取消</Button>
        <Button type="primary"
                style="margin-left:15px;"
                @click="confirmExit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import './user.less'
import { mapActions } from 'vuex'
export default {
  name: 'User',
  data () {
    return {
      confirmLogout: false,
    }
  },
  props: {
    userAvator: {
      type: String,
      default: '',
    },
  },
  methods: {
    ...mapActions(['handleLogOut']),
    handleClick (name) {
      switch (name) {
        case 'logout':
          this.confirmLogout = true
          break;
      }
    },
    confirmExit () {
      this.handleLogOut().then(() => {
        this.confirmLogout = false
        this.$router.replace({
          name: 'login',
        })
      })
    }
  },
}
</script>
